<template>
	<view class="recommends">
		<view :class=" props.isLine?'line':'list'">
			<view class="item" v-for="item in list" :key="item.id" @tap="toDetails(item.id)">
				<view class="image">
					<image :src="img(item.mainPicture || item.thumPic)" mode=""></image>
					<view v-if="item.goodsStatus==2 ||item.goodsStatus==3">已抢光</view>
				</view>
				<view class="item_centent">
					<view class="name" :class="props.isLine?'xjs-line-two':'xjs-line-one'"><text v-if="item.saleType==3">预售</text>{{item.name}}</view>
					<view class="introduce xjs-line-one">{{item.description}}</view>
					<view class="price ">
						<text>¥{{item.discountPrice || item.price}}</text>
						<image :src="url+'icon-174.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const props = defineProps(['isLine','list'])

const toDetails = (id:string)=>{
	uni.navigateTo({
		url:'/pages/shopping/productDetails/index?goodsId=' + id
	})
}
const img = (str:string)=>{
	let url = ''
	if(str.indexOf('|')!=-1){
		console.log(str.split('|'))
		url = str.split('|')[0]
	}else{
		url = str
	}
	return url
}


</script>

<style lang="scss" scoped>
.list{
	display: grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	grid-gap:24rpx;
	.item{
		width: 332rpx;
		background: #fff;
		border-radius: 24rpx;
		.image{
			width: 332rpx;
			height: 332rpx;
			border-radius: 24rpx;
			position: relative;
			>image{
				width: 332rpx;
				height: 332rpx;
				border-radius: 24rpx 24rpx 0 0;
			}
			view{
				font-size: 26rpx;
				color: #1B2120;
				position: absolute;
				left: 0;top: 0;
				width: 332rpx;
				height: 332rpx;
				border-radius: 24rpx;
				@include flex(center,center);
				background: rgba(255,255,255,0.65);
			}
		}
		.item_centent{
			width: 100%;
			padding: 24rpx 16rpx 26rpx;
			box-sizing: border-box;
			.name{
				color: #1B2120;
				font-size: 30rpx;
				margin-bottom: 14rpx;
			}
			.introduce{
				font-size: 24rpx;
				color: #7C807F;
				margin-bottom: 16rpx;
				line-height: 40rpx;
			}
			.price{
				font-weight: bold;
				font-size: 30rpx;
				color: #FF6084;
				@include flex(center,space-between);
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
}
.line{
	display: grid;
	padding: 48rpx 32rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	grid-template-columns:100%;
	grid-gap:48rpx;
	.item{
		width: 100%;
		background: none;
		border-radius: 0;
		padding-bottom: 48rpx;
		border-bottom: 2rpx solid #F9F6F6;
		@include flex(center,space-between);
		&:last-child{
			padding-bottom:0;
			border-bottom:none;
		}
		.image{
			width: 240rpx;
			height: 240rpx;
			border-radius: 24rpx;
			position: relative;
			>image{
				width: 240rpx;
				height: 240rpx;
				border-radius: 24rpx;
			}
			view{
				font-size: 26rpx;
				color: #1B2120;
				position: absolute;
				left: 0;top: 0;
				width: 240rpx;
				height: 240rpx;
				border-radius: 24rpx;
				@include flex(center,center);
				background: rgba(255,255,255,0.65);
			}
		}
		.item_centent{
			width:calc(100% - 264rpx);
			padding: 0;
			box-sizing: border-box;
			.name{
				width: 100%;
				font-size: 32rpx;
				color: #1B2120;
				line-height: 40rpx;
				margin-bottom: 24rpx;
				text{
					display: inline-block;
					line-height: 1;
					border-radius: 50rpx;
					padding:4rpx 8rpx;
					border: 2rpx solid #6363FF;
					color: #6363FF;
					font-size: 24rpx;
					box-sizing: border-box;
					margin-right: 4rpx;

				}
			}
			.introduce{
				font-size: 26rpx;
				color: #7C807F;
				// height: 26rpx;
				margin-bottom: 50rpx;
			}
			.price{
				font-weight: bold;
				font-size: 30rpx;
				color: #FF6084;
				@include flex(center,space-between);
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
}
</style>